本来想把这几种方法放在同一篇写的,写完xhr,已经很长了,想想还是分开的比较好。
webuploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。它的兼容性很好,兼容IE6+,IOS6+,Android4+。由于做的系统都要兼容IE8,在用webuploader之前,换过了好几个组件,都无法满足需求,比如uploadify无法在header里面添加token(需求其实很简单,不能随便拿个组件来用,我嘛很绝望)话说,其实一开始就有试着用webuploader,但是由于某网站上的demo里面的js文件有问题,会报错(当时项目赶啊,着急啊,就放弃了,后面问了一下狮虎,狮虎也是用webuploader,我就跑官网去下载,就可以了!)果然还是官网靠谱!顺便提一下,用webuploader这个项目,文件上传是上传到自己的服务器,不是上传七牛。
先上代码,这个代码是用在项目里面之前,写的一个小demo,参数不齐全。。。(webuploader使用起来很简单,api也很详细,去官网看一下就可以上手了)
<html style="padding-bottom: 54px;">
<head>
<meta charset="UTF-8">
<title>Upload</title>
<link href="css/webuploader.css" rel="stylesheet">
</head>
<body>
<div id="uploader" class="wu-example">
<!--用来存放文件信息-->
<div id="thelist" class="uploader-list"></div>
<div class="btns">
<div id="picker">选择文件</div>
</div>
</div>
<script src="//cdn.bootcss.com/jquery/1.12.2/jquery.min.js"></script>
<script src="js/webuploader.js"></script>
<script src="js/test.js"></script>
</body>
</html>
(function () {
var uploader = WebUploader.create({
// swf文件路径
swf: 'js/Uploader.swf',
// 文件接收服务端。
server: 'uploadify.php', // 因为是demo,就拿着uploadify的php来用一下
// 选择文件的按钮。可选。
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick: '#picker',
// 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
resize: false,
auto: true,
headers: {'userName': 'emi', 'token': '123456'}
});
// 当有文件被添加进队列的时候,添加到页面预览
uploader.on( 'fileQueued', function( file ) {
$('#thelist').append( '<div id="' + file.id + '" class="item">' +
'<h4 class="info">' + file.name + '</h4>' +
'<p class="state">等待上传...</p>' +
'</div>' );
});
// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
var $li = $( '#'+file.id ),
$percent = $li.find('.progress .progress-bar');
// 避免重复创建
if ( !$percent.length ) {
$percent = $('<div class="progress progress-striped active">' +
'<div class="progress-bar" role="progressbar" style="width: 0%">' +
'</div>' +
'</div>').appendTo( $li ).find('.progress-bar');
}
$li.find('p.state').text('上传中');
$percent.css( 'width', percentage * 100 + '%' );
});
uploader.on( 'uploadSuccess', function( file ) {
$( '#'+file.id ).find('p.state').text('已上传');
});
uploader.on( 'uploadError', function( file ) {
$( '#'+file.id ).find('p.state').text('上传出错');
});
uploader.on( 'uploadComplete', function( file ) {
$( '#'+file.id ).find('.progress').fadeOut();
});
})();
项目过程中,我也遇到了一个很普遍的问题(虽然上面代码里面没有这个参数,这个参数是指定接受哪些类型的文件),就是文件夹打开特别慢,网上找了一下
accept: {
title: 'Images',
extensions: 'jpg,jpeg,png',
mimeTypes: 'image/*'
}
改成这样就可以了,亲测有效~
accept: {
title: 'Images',
extensions: 'jpg,jpeg,png',
mimeTypes: 'image/jpg,image/jpeg,image/png' //修改位置
}
可以通过upload对象改参数值,比如uploader.options.server = '服务器路径'。也可以重写上传事件。
如果不自动上传的话,可以通过upoloader.upload()触发。
感觉webuploader真心用得顺风顺水,没遇到什么问题。实在憋不出什么来。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。